<template>
  <div style="padding: 20px;">
    <el-card>
      <div style="display: flex;">
        <el-text class="mx-1" type="primary">口罩检测摄像头</el-text>
        <el-input v-model="playUrl" placeholder="播放地址" disabled style="width: 50%;margin-left: 20px;"></el-input>
      </div>
    </el-card>

    <el-card header="检测记录" style="margin-top: 20px;">
      <el-row>
        <el-col :span="6" v-for="(item, index) in tableData" :key="index">
          <el-image :src="getImageUrl(item)" :preview-src-list="[getImageUrl(item)]"
                    style="width: 192px;height:108px;display: block;margin-bottom: 20px"/>
        </el-col>
      </el-row>
      <div style="display: flex; justify-content: flex-end;">
        <el-pagination
            v-show="total > 0"
            layout="prev, pager, next"
            background
            :page-count="total"
            :page-size="params.pageSize"
            :current-page="params.page"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {getPhotosList} from "../api/photos.js";

const playUrl = ref("rtsp://admin:hx147258@192.168.158.65:554/Streaming/Channels/2");

const total = ref(0);
const params = ref({
  page: 1,
  pageSize: 12
});

const tableData = ref([]);
const getList = async () => {
  await getPhotosList(params.value).then(res => {
    const data = res.data.data.body;
    tableData.value = data.photos;
    total.value = data.totalPages;
  })
}

const getImageUrl = (filename) => {
  return new URL(`/src/assets/rtsp/${filename}`, import.meta.url).href;
}


onMounted(() => {
  getList()
});

const handlePageChange = (page) => {
  params.value.page = page; // 更新当前页码
  getList(); // 重新获取数据
};
</script>

<style scoped>

</style>